import 'package:flutter/material.dart';

class StateOutlineButton extends StatefulWidget {
  final Function(bool) onPressed; // 点击按钮时传递状态的回调
  final bool initialState; // 初始状态（true 或 false）
  final double borderWidth; // 边框宽度
  final Color activeBorderColor; // 状态为 true 时的边框颜色
  final Color inactiveBorderColor; // 状态为 false 时的边框颜色
  final String activeText; // 状态为 true 时的按钮文本
  final String inactiveText; // 状态为 false 时的按钮文本
  final TextStyle? activeTextStyle; // 状态为 true 时的文本样式
  final TextStyle? inactiveTextStyle; // 状态为 false 时的文本样式

  const StateOutlineButton({
    Key? key,
    required this.onPressed,
    this.initialState = false, // 默认值为 false
    this.borderWidth = 2.0,
    this.activeBorderColor = Colors.blue,
    this.inactiveBorderColor = Colors.grey,
    this.activeText = "Active",
    this.inactiveText = "Inactive",
    this.activeTextStyle, // 默认样式为空
    this.inactiveTextStyle, // 默认样式为空
  }) : super(key: key);

  @override
  _StateOutlineButtonState createState() => _StateOutlineButtonState();
}

class _StateOutlineButtonState extends State<StateOutlineButton> {
  late bool _currentState;

  @override
  void initState() {
    super.initState();
    _currentState = widget.initialState; // 设置初始状态
  }

  @override
  Widget build(BuildContext context) {
    double height = 48.0; // 固定高度
    double borderRadius = height / 2; // 圆角为高度的一半

    // 根据文本内容自适应纵向和横向的间距
    double paddingVertical = 6.0; // 默认纵向间距
    double paddingHorizontal = 24.0; // 默认横向间距

    // 计算文本样式的实际大小，来动态调整 padding
    TextStyle textStyle = _currentState
        ? widget.activeTextStyle ??
              TextStyle(color: widget.activeBorderColor, fontSize: 16.0)
        : widget.inactiveTextStyle ??
              TextStyle(color: widget.inactiveBorderColor, fontSize: 16.0);

    TextSpan span = TextSpan(
      text: _currentState ? widget.activeText : widget.inactiveText,
      style: textStyle,
    );
    TextPainter textPainter = TextPainter(
      text: span,
      maxLines: 1,
      textDirection: TextDirection.ltr,
    )..layout();

    // 根据文本的实际宽度调整间距
    paddingHorizontal = textPainter.width < 300 ? 16.0 : 30.0;
    paddingVertical = textPainter.height < 50 ? 5.0 : 8.0;

    return GestureDetector(
      onTap: () {
        setState(() {
          _currentState = !_currentState; // 切换状态
        });
        widget.onPressed(_currentState); // 传递当前状态
      },
      child: Container(
        height: height, // 固定按钮高度
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(borderRadius),
          border: Border.all(
            color: _currentState
                ? widget.activeBorderColor
                : widget.inactiveBorderColor,
            width: widget.borderWidth,
          ),
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(
            vertical: paddingVertical,
            horizontal: paddingHorizontal,
          ),
          child: Center(
            child: Text(
              _currentState ? widget.activeText : widget.inactiveText,
              style: textStyle, // 使用计算后的文本样式
            ),
          ),
        ),
      ),
    );
  }
}
